<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Interface testing tool</title>
    <link rel="icon" href="/static/images/xty.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/static/images/xty.ico" type="image/x-icon">
    <link  href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/scripts/jquery-3.2.1.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
     <style type="text/css">
        .url{
            width:338px;
            height:50px;
        }
        .com_input{
            width:557px;
            height:50px;
        }
        .post_mothod, .send{
            width:70px;
            height:50px;
            
        }
        .left, .right {
            padding: 10px;
            display: table-cell;
            border: 1px solid #aaaaaa;
        }    
        .left_cl{
            padding: 0px;
            width:600px;
/*            height:80px;*/
            display: table-cell;
            border: 1px solid #aaaaaa; }
        #middle_id{
            position:absolute;
            left:605px;
            top:200px;
            margin:10px 0px 30px 0px
        }   
        #right_id{
            position:absolute;
            left:696px;
            top:32px;
            margin:10px 0px 30px 0px
        }  

    </style>
  </head>
  <body>
    
    <div>
      <ul class="nav nav-tabs nav-justified">
        <li><a href="/index/">Interface Testing Tool</a></li>
        <li class="active"><a href="/url_decoding/">url_decoding</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            字符串处理<span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">xml_json</a></li>
            <li><a href="#">json_xml</a></li>
            <li><a href="#">MD5</a></li>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
          </ul>
        </li>
        <li><a href="#">url_encoded</a></li>
      </ul>
    </div>
    <div class="left_cl">
      <textarea id="json-src" name="url_enc_content"  placeholder="在此输入json字符串或XML字符串..." class="form-control" style="height:100%;height: 90vh;min-height:520px;padding:0px 0px 0px 0px;border:0;border-right:solid 1px #E5EBEE;border-bottom:solid 1px #eee;border-radius:0;resize: none; outline:none;font-size:20px;"></textarea>
      
    </div>

    <div id="middle_id">
        <button type="button" class="btn btn-primary">原始按钮</button><br><br>
        <button type="button" class="btn btn-primary">原始按钮</button><br><br>
        <button type="button" class="btn btn-primary">原始按钮</button><br><br>
        <button type="button" class="btn btn-primary">原始按钮</button><br><br>
        <button type="button" class="btn btn-primary">原始按钮</button><br>
    </div>
    <div id="right_id">
    <!--   <textarea rows="30" cols="88" ></textarea> -->
        <p></p>
      
    </div>



  </body>

  <script type="text/javascript">

    function changmethod(){
      var test = document.getElementById("test_moth").value;
      if(test==="GET_METHOD"){
        document.getElementById("content_id").disabled=true;
      }else if(test==="POST_METHOD"){
        document.getElementById("content_id").disabled=false;
      }
    };

    function changtype(){
      var chang_val = document.getElementById("posttypeId").value;
      if(chang_val==="com_inter"){
        $("#qm_inter_met").hide();
      }else if(chang_val==="qm_inter"){
        $("#qm_inter_met").show();
      }
    };

    function rec_api(){
                $.ajax({
                    type: "POST",
                    dataType: "JSON",
                    url: "/interface/",
                    data: $('#inter_form').serialize(),
                    success: function(result){
                        console.log(result);
                        $("#result_content p").html(JSON.stringify(result));//写到P标签里面 JSON.stringify 转为字符串 
                        // $("#result_content p").html(JSON.parse(result));

                    // error : function(){
                    //     alert("异常！");
                    }
                })
            }

  </script>
</html>
